<template>
  <div class="app-container calendar-list-container">
    <div v-if="!opShow && !authShow">
      <buttons :showQuery="true" @query="doQuery" :list="btnList" :disabled="disabled" placeholder="用户名称" :permissions="permissions" @add="doAdd" @view="doView" @edit="doEdit"
        @role="openRole">
      </buttons>
      <grid :columns="columns" :multi="true" :url="queryUrl" ref="mainGrid" height="auto" diffHeight="75" @change="rowCilck" :queryEntity="{companyCode:companyCode}"
        :pagination="true"></grid>
    </div>
    <op ref="op" :visible="opShow" @cancel="cancel"></op>
    <auth ref="auth" :visible="authShow" @cancel="cancel"></auth>
  </div>
</template>

<script>
import request from '@/router/axios'
import url from '@/const/apiURL'
import grid from '@/components/Grid'
import buttons from '@/components/Buttons'
import op from './op'
import auth from './auth'
import { Message, MessageBox } from 'element-ui'
import { initMenu } from "@/util/util";
import { resolveUrlPath } from "@/util/util";
import { mapGetters } from 'vuex'
import { YesOrNoFormatter } from '@/const/dict'

export default {
  components: { grid, buttons, op, auth },
  data () {
    return {
      queryUrl: url.USER_MANAGER_LIST_URL,
      disabled: true,
      opShow: false,
      authShow: false,
      companyCode: '',
      columns: [
        { label: '用户名', width: 120, prop: 'userName', align: 'left' },
        { label: '邮箱', width: 180, prop: 'email', align: 'left' },
        { label: '手机号码', width: 120, prop: 'mobile', align: 'left' },
        { label: '职位', width: 120, prop: 'positionName', align: 'left' },
        { label: '是否启用', width: 80, prop: 'status', align: 'center', formatter: YesOrNoFormatter },
        { label: '排序', width: 80, prop: 'indexSort', align: 'center', sortable: 'custom', order: 'index_sort' },
        { label: '创建人', width: 100, prop: 'createUserName', align: 'center' },
        { label: '创建时间', width: 100, prop: 'createTime', align: 'center' }
      ],
      btnList: [
        { name: '新增', type: 'primary', icon: 'edit', click: 'add', auth: 'manager_user_add', ctr: false },
        { name: '编辑', type: 'primary', icon: 'edit', click: 'edit', auth: 'manager_user_edit', ctr: true },
        { name: '查看', type: 'primary', icon: 'edit', click: 'view', auth: 'manager_user_view', ctr: true },
        { name: '角色设置', type: 'primary', icon: 'edit', click: 'role', auth: 'manager_user_role', ctr: true }
      ]
    }
  },
  created () {
    this.companyCode = this.$route.query.companyCode
  },
  computed: {
    ...mapGetters([
      'permissions'
    ])
  },
  methods: {
    doAdd () {
      this.opShow = true
      this.$refs['op'].init('新增', { companyCode: this.companyCode }, false, url.USER_COMAONY_ADD_URL)
    },
    doView () {
      const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.viewOp(row.userCode, this.companyCode).then(data => {
          if (data) {
            this.opShow = true
            data.companyCode = this.companyCode
            this.$refs['op'].init('编辑', data, true)
          }
        })
      }
    },
    doEdit () {
      const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.viewOp(row.userCode, this.companyCode).then(data => {
          if (data) {
            this.opShow = true
            data.companyCode = this.companyCode
            this.$refs['op'].init('编辑', data, false, url.USER_COMAONY_EDIT_URL)
          }
        })
      }
    },
    doQuery (text) {
      this.$refs['mainGrid'].doQuery(text)
    },
    rowCilck (row) {
      this.disabled = row.length == 0
    },
    cancel () {
      this.opShow = false
      this.authShow = false
    },
    viewOp (userCode, companyCode) {
      return request({
        url: url.USER_VIEW_URL,
        method: 'post',
        data: { key: 'key' },
        params: { userCode, companyCode }
      })
    },
    openRole () {
      const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.authShow = true
        this.$refs['auth'].init(row)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
